import React from "react";
import Draggable from "react-draggable";
import Resizable from "react-resizable-box";
import { store } from "./store";

export class C1 extends React.Component<{style:any}>{
  public origin = {
    width: '100%',
    height: '100%',
  }
  public ref:any

  public catch:any = {}

  public state = {
    data: [],
    width: this.origin.width,
    height: this.origin.height,
    activeDrags: 0,
    deltaPosition: {
      x: 0, y: 0
    },
    controlledPosition: {
      x: 0, y: 0
    },
    style: this.props.style
  }

  public onStart = (...args:any[])  => {
    console.log(args)
    this.setState({activeDrags: ++this.state.activeDrags});
  }

  public onStop = (...args:any[]) => {
    console.log(args)
    this.setState({})
    this.setState({activeDrags: --this.state.activeDrags});
  }

  public onControlledDrag = (e:any, position:any) => {
    const {x, y} = position;
    const positions = [
      [this.catch.offsetLeft + x, this.catch.offsetTop + y],
      [this.catch.offsetLeft + x + this.catch.clientWidth, this.catch.offsetTop + y],
      [this.catch.offsetLeft + x, this.catch.offsetTop + y + this.catch.clientHeight],
      [this.catch.offsetLeft + x + this.catch.clientWidth, this.catch.offsetTop + y + this.catch.clientHeight],
    ]
    store.next({ positions })
    console.log('onControlledDrag', this.catch, x, y, positions)
  }

  public componentDidUpdate(){
    this.catch.offsetLeft = this.ref.offsetLeft
    this.catch.offsetTop = this.ref.offsetTop
    this.catch.clientHeight = this.ref.clientHeight
    this.catch.clientWidth = this.ref.clientWidth
  }

  public async componentDidMount(){
    this.catch.offsetLeft = this.ref.offsetLeft
    this.catch.offsetTop = this.ref.offsetTop
    this.catch.clientHeight = this.ref.clientHeight
    this.catch.clientWidth = this.ref.clientWidth

    const data = await fetch('https://www.easy-mock.com/mock/5b55575020511b117b20c758/example/resources').then(res => res.json()).then(res => res.data)
    
      if(localStorage.getItem('parse')){
      this.setState({data: eval(localStorage.getItem('parse') || '')})
    }else{
      this.setState(data)
    }
    console.log('cc', this.ref, this.catch)
  }

  public componentWillReceiveProps(nextProps:any){
      this.setState({style: nextProps.style})
  }

  public render(){
    const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
    // const {controlledPosition} = this.state;
    const R:any = Resizable
    return (
      <div ref={(ref) => this.ref = ref}  style={{position: 'absolute', ...this.state.style}} >
      <R
            style={{ position: 'absolute', right: 0, bottom: 0, top: 0, left: 0, background: 'aqua'}}
            width = {this.state.width}
            height = {this.state.height}
            onResize={(e:any, direction:any, ref:any, d:any) => {
              console.log(direction, d)
              if (direction === 'topLeft') {
                this.setState({ style: {...this.props.style, top: this.props.style.top - d.height,  left: this.props.style.left - d.width} })
              }
              if (direction === 'bottomRight') {
                const positions = [
                  [this.catch.offsetLeft, this.catch.offsetTop],
                  [this.catch.offsetLeft + this.catch.clientWidth + d.width, this.catch.offsetTop],
                  [this.catch.offsetLeft, this.catch.offsetTop + d.height + this.catch.clientHeight],
                  [this.catch.offsetLeft + d.width + this.catch.clientWidth, this.catch.offsetTop + d.height + this.catch.clientHeight],
                ]
                store.next({ positions })
              }
              this.setState({
                width: this.origin.width + d.width,
                height: this.origin.height + d.height,
              });
            }}
            onResizeStop={() => {
              this.setState({ height: '100%', width: '100%' })
              setTimeout(() => {
                this.componentDidMount()
              }, 1);
            }}
          >
        <Draggable  position={{x:0,y:0}} onDrag={this.onControlledDrag} {...dragHandlers}>
            
            <div style={{ position: 'relative',height: '100%', width: '100%', background: 'red'}}>{JSON.stringify(this.state.data)}</div>

          </Draggable>
          </R>
        </div>

    )
  }
}
/* <div style={{...this.props.style, background: 'aqua', height: 100, resize:'both', overflow:'auto'}}>CCCCCCCCCCCCCCCCCCCCCcc1</div> */